<template>
    <div>
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
            text-color="#fff" router unique-opened style="height: 100vh;">

            <div v-for="item in list" :key="item.id">
                <el-sub-menu :index="item.id+''" v-if="item.children">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>
                            {{ item.title }}
                        </span>
                    </template>

                    <el-menu-item :index="v.path" v-for="v in item.children" :key="v.id">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>{{ v.name }}</span>
                    </el-menu-item>

                </el-sub-menu>


                <el-menu-item :index="item.component" v-else>
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </div>


        </el-menu>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

// 首页
import Home from '@/views/Home.vue';
// 系统管理  管理账号
import Guanlizhanghao from '@/views/xitong/Guanlizhanghao.vue';
// 角色管理
import Jueseguanli from '@/views/xitong/Jueseguanli.vue';
// 权限管理
import Quanxian from '@/views/xitong/Quanxian.vue';
// 广告列表
import Guangaolist from '@/views/guanggao/Guangaolist.vue';
// 新闻列表
import Xinwenlist from '@/views/xinwen/Xinwenlist.vue';
// 视频列表
import Shipinlist from '@/views/shipin/Shipinlist.vue';
// 分类管理
import fenlei from '@/views/shangpin/Fenlei.vue';
// 商品管理
import shangpinlist from '@/views/shangpin/Shangpinlist.vue';
// 订单管理
import Dingfan from '@/views/shangpin/Dingfan.vue';
// 订单结算
import Dingdanjiesuan from '@/views/qixiu/Dingdanjiesuan.vue';
// 下单
import Xiadan from '@/views/qixiu/Xiadan.vue';
// 用户列表
import Userlist from '@/views/user/Userlist.vue';
// 汽修积分
import Jifen from '@/views/user/Jifen.vue';

const list = ref([
    {
        id: 1,
        path: '/home',
        title: "首页",
        component: Home,
    },
    {
        id: 2,
        title: "系统管理",
        children: [
            {
                id: 21,
                path: '/guanlizhanghao',
                name: '管理账号',
                component: Guanlizhanghao,
                meta: { title: '管理账号' }
            },
            {
                id: 22,
                path: '/jueseguanli',
                name: '角色管理',
                component: Jueseguanli,
                meta: { title: '角色管理' }
            },
            {
                id: 23,
                path: '/quanxian',
                name: '权限管理',
                component: Quanxian,
                meta: { title: '权限管理' }
            },
        ]
    },
    {
        id: 3,
        title: "广告管理",
        children: [
            {
                id: 31,
                path: '/guangaolist',
                name: '广告列表',
                component: Guangaolist,
                meta: { title: '广告列表' }
            },
        ]
    },
    {
        id: 4,
        title: "新闻管理",
        children: [
            {
                id: 41,
                path: '/xinwenlist',
                name: '新闻列表',
                component: Xinwenlist,
                meta: { title: '新闻列表' }
            },
        ]
    },
    {
        id: 5,
        title: "视频管理",
        children: [
            {
                id: 21,
                path: '/shipinlist',
                name: '视频列表',
                component: Shipinlist,
                meta: { title: '视频列表' }
            },
        ]
    },
    {
        id: 6,
        title: "商品管理",
        children: [
            {
                id: 61,
                path: '/fenlei',
                name: '分类管理',
                component: fenlei,
                meta: { title: '分类管理' }
            },
            {
                id: 62,
                path: '/shangpinlist',
                name: '商品管理',
                component: shangpinlist,
                meta: { title: '商品管理' }
            },
            {
                id: 63,
                path: '/dingfan',
                name: '订单管理',
                component: Dingfan,
                meta: { title: '订单管理' }
            },
        ]
    },
    {
        id: 7,
        title: "汽修订单",
        children: [
            {
                id: 71,
                path: '/dingdanjiesuan',
                name: '订单结算',
                component: Dingdanjiesuan,
                meta: { title: '订单结算' }
            },
            {
                id: 72,
                path: '/xiadan',
                name: '下单',
                component: Xiadan,
                meta: { title: '下单' }
            },
        ]
    },
    {
        id: 8,
        title: "用户管理",
        children: [
            {
                id: 81,
                path: '/userlist',
                name: '用户列表',
                component: Userlist,
                meta: { title: '用户列表' }
            },
            {
                id: 82,
                path: '/jifen',
                name: '汽修积分',
                component: Jifen,
                meta: { title: '汽修积分' }
            }
        ]
    },
])
</script>

<style lang='less' scoped></style>